<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>端API</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <style>
        .selectActive {
            background-color: #FADDCF !important;
            color: #EB7B3D;

        }
        .active a{
          color: #9d0152;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="back big" onclick="close_win()" tapmode></div>
    <div class="result-header-div">
        <div class="result-header-white">
            <img src="../../image/big/search_btn_grey.png" class="search-img"/>
            <form onsubmit="return searchKey()">
                <input placeholder="" style="outline: none" id="keyword" type="search" style="outline: none"
                       oninput="addLis(event)" onporpertychange="addLis(event)"/>
            </form>
            <img id="img" src="../../image/small/search_quxiao.png" class="cancel" onclick="closeWin()" tapmode/>
        </div>
        <div class="header-right">
            <span  onclick="searchKey()" style="font-size:14px;color:#333">搜索</span>
        </div>
    </div>
</div>
<div id="app">
    <div class="condition " style="background: white" v-cloak>
        <ul>
            <li v-myclick="[0, changeStatus]" :class="{'active': 0===isActive}">
                <a class="li-click ">综合排序</a>
            </li>
            <li v-myclick="[1, changeStatus]" :class="{'active': 1===isActive}">
                <a class="li-click ">销量</a>
                <img v-show="isActive!=1" style="width: 14px;height: 14px;"
                     src="../../image/small/tab_default_img.png"/>
                <img v-show="!isSale&&isActive===1" style="width: 14px;height: 14px;"
                     src="../../image/small/tab_to_des.png"/>
                <img v-show="isSale&&isActive===1" style="width: 14px;height: 14px;"
                     src="../../image/small/tab_to_asc.png"/>
            </li>
            <li v-myclick="[2, changeStatus]" :class="{'active': 2===isActive}">
                <a class="li-click ">价格</a>
                <img style="width: 14px;height: 14px;" v-show="isActive!=2"
                     src="../../image/small/tab_default_img.png"/>
                <img style="width: 14px;height: 14px;" v-show="isPrice&&isActive===2"
                     src="../../image/small/tab_to_des.png"/>
                <img style="width: 14px;height: 14px;" v-show="!isPrice&&isActive===2"
                     src="../../image/small/tab_to_asc.png"/>
            </li>
            <li v-myclick="openSelect_frame" :class="{'active': 3===isActive}">
                <a class="li-click" tapmode>筛选</a>
            </li>
        </ul>
    </div>

    <div class="modal-search-filter" v-show="showModal" v-myclick="cancelModal" @touchmove.prevent v-cloak>

    </div>
    <div class="my-order-body" v-cloak v-if="goodsList.length==0" style="background: white;">
        <div style="text-align:center;padding: 20px;">
            <img src="../../image/big/not_available.png" width="70px" height="70px"/>
            <div style="padding-top:10px ">
                <span>没找到您要的商品</span>
            </div>
        </div>
        <div class="search-tuijian" style="background: #f7f7f7">
            <img class="search-tuijian-bg" v-src="'../../image/home_icon_tuijianleft.png'">
            <span>猜你喜欢</span>
            <img class="search-tuijian-bg" v-src="'../../image/home_icon_tuijianright.png'">
        </div>
        <div class="home-recommendGoods-box">
            <div class="home-recommendGoods-single1" v-for="(good,index) in likeList" v-show="listOf2col">
                <div class="home-recommendGoods-mallType" :style="{backgroundColor:good.from_type_color}">
                    {{good.from_type_name}}
                </div>
                <img v-image-resize="{src:good.pic}" v-myclick="[good.goods_id, openGoodsDetail]"
                     :key="good.goods_id">
                <div class="home-recommendGoods-info">
                    <div class="info-1">{{good.title}}</div>
                    <div class="info-2">
                        <span class="span-1st">成交{{good.sale_count}}笔</span>
                        <span class="span-2nd" v-if="good.is_free_express == '1'">包邮</span>
                    </div>
                    <div class="info-3">
                        <span class="span-1st">券后价 ¥<span>{{good.price}}</span></span>
                        <span class="span-2nd">¥{{good.prime}}</span>
                    </div>
                </div>
                <div class="home-recommendGoods-buttons">
                    <span v-myclick="[good, changeFavor]" :class="[BSImg, good.favor == '1' ? 'active' : '']"
                          :key="key"></span>
                    <img v-src="'../../image/home_icon_share.png'" v-myclick="[good.share, share]" tapmode>
                    <a v-myclick="[good.goods_id, openGoodsDetail]">立即购买</a>
                </div>
            </div>
            <div class="home-recommendGoods-single2" v-for="(good,index) in likeList" v-show="!listOf2col">
                <div class="home-recommendGoods-mallType" :style="{backgroundColor:good.from_type_color}">
                    {{good.from_type_name}}
                </div>
                <div class="single2-left">
                    <img v-image-resize="{src:good.pic}" v-myclick="[good.goods_id, openGoodsDetail]" tapmode
                         :key="good.goods_id">
                </div>
                <div class="single2-right">
                    <div class="home-recommendGoods-info">
                        <div class="info-1">{{good.title}}</div>
                        <div class="info-2">
                            <span class="span-1st">成交{{good.sale_count}}笔</span>
                            <span class="span-2nd" v-if="good.is_free_express == '1'">包邮</span>
                        </div>
                        <div class="info-3">
                            <span class="span-1st">券后价 ¥<span>{{good.price}}</span></span>
                            <span class="span-2nd">¥{{good.prime}}</span>
                        </div>
                    </div>
                    <div class="home-recommendGoods-buttons">
                        <span v-myclick="[good, changeFavor]" :class="[BSImg, good.favor == '1' ? 'active' : '']"
                              :key="key"></span>
                        <img v-src="'../../image/home_icon_share.png'" v-myclick="[good.share, share]"
                             tapmode>
                        <a v-myclick="[good.goods_id, openGoodsDetail]">立即购买</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="home-recommendGoods-box" v-cloak style="padding-top: 112px;"
         v-if="goodsList.length>0">
        <div class="home-recommendGoods-single1" v-for="(good,index) in goodsList" v-show="listOf2col">
            <div class="home-recommendGoods-mallType" :style="{backgroundColor:good.from_type_color}">
                {{good.from_type_name}}
            </div>
            <img v-image-resize="{src:good.pic}" v-myclick="[good.goods_id, openGoodsDetail]" tapmode
                 :key="good.goods_id">
            <div class="home-recommendGoods-info">
                <div class="info-1">{{good.title}}</div>
                <div class="info-2">
                    <span class="span-1st">成交{{good.sale_count}}笔</span>
                    <span class="span-2nd" v-if="good.is_free_express == '1'">包邮</span>
                </div>
                <div class="info-3">
                    <span class="span-1st">券后价 ¥<span>{{good.price}}</span></span>
                    <span class="span-2nd">¥{{good.prime}}</span>
                </div>
            </div>
            <div class="home-recommendGoods-buttons">
                <span v-myclick="[good, changeFavor]" :class="[BSImg, good.favor == '1' ? 'active' : '']"
                      :key="key"></span>
                <img v-src="'../../image/home_icon_share.png'" v-myclick="[good.share, share]">
                <a v-myclick="[good.goods_id, openGoodsDetail]">立即购买</a>
            </div>
        </div>
        <div class="home-recommendGoods-single2" v-for="(good,index) in goodsList" v-show="!listOf2col">
            <div class="home-recommendGoods-mallType" :style="{backgroundColor:good.from_type_color}">
                {{good.from_type_name}}
            </div>
            <div class="single2-left">
                <img v-image-resize="{src:good.pic}" v-myclick="[good.goods_id, openGoodsDetail]"
                     :key="good.goods_id">
            </div>
            <div class="single2-right">
                <div class="home-recommendGoods-info">
                    <div class="info-1">{{good.title}}</div>
                    <div class="info-2">
                        <span class="span-1st">成交{{good.sale_count}}笔</span>
                        <span class="span-2nd" v-if="good.is_free_express == '1'">包邮</span>
                    </div>
                    <div class="info-3">
                        <span class="span-1st">券后价 ¥<span>{{good.price}}</span></span>
                        <span class="span-2nd">¥{{good.prime}}</span>
                    </div>
                </div>
                <div class="home-recommendGoods-buttons">
                    <span v-myclick="[good, changeFavor]" :class="[BSImg, good.favor == '1' ? 'active' : '']"
                          :key="key"></span>
                    <img v-src="'../../image/home_icon_share.png'" v-myclick="[good.share, share]">
                    <a v-myclick="[good.goods_id, openGoodsDetail]">立即购买</a>
                </div>
            </div>
        </div>
    </div>
    <div v-if="goodsList.length != 0">
        <lazy-load
                count-per-page="20"
                :arr="goodsList"
                :url="url"
                ret-attr="searchResult"
                :other-datas="params">
        </lazy-load>
    </div>
</div>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/components.js"></script>
<script>
    var goodsList, likeList;
    var vm;
    var param;
    var listOf2col = true;
    var MNActionButton;
    var wx;

    function closeWin() {
        document.getElementById('keyword').value = "";
        document.getElementById('img').style.display = "none";
    }
    function addLis(event) {
        var key_word = event.target.value;
        if (!key_word) {
            document.getElementById('img').style.display = "none";
        } else {
            document.getElementById('img').style.display = "block";
        }
    }
    function searchKey() {
        var key = document.getElementById('keyword').value;
        var locallist = $api.getStorage('search_message');
        if (!locallist) {
            locallist = new Array();
        }


        getLocalList(locallist, key);
        var data = {
            member_id: getPrefs('member_id'),
            keyword: key
        };
        var callback = function (ret) {
            vm.goodsList = ret.content.searchResult;
            if (vm.goodsList.length == 0) {
                vm.likeList = ret.content.recommendGoods;
            }
        };
        pinet.post(URL.searchGoods, data, callback);
        return false;
    }
    function close_win() {
        onPageEnd();
        api.closeWin();
    }
    apiready = function () {
        showProgress();
        setBSImg();
        MNActionButton = api.require('PIActionButton');
        wx = api.require('wx');
        param = api.pageParam;
        document.getElementById('keyword').value = param.keyword;
        close_win();
        var locallist = $api.getStorage('search_message');
        if (!locallist) {
            locallist = new Array();
        }
        getLocalList(locallist, param.keyword);

        var data = {
            keyword: param.keyword,
            member_id: getPrefs('member_id'),
        };
        var callback = function (ret) {
            goodsList = ret.content.searchResult;
            if (goodsList.length == 0) {
                likeList = ret.content.recommendGoods;
            }
            initApp();
            api.parseTapmode();
        };

        pinet.post(URL.searchGoods, data, callback);
        addListeners();
    };

    function getLocalList(list, val) {
        if (val) {
            Array.prototype.indexOf = function (val) {
                for (var i = 0; i < this.length; i++) {
                    if (this[i] == val) {
                        return i;
                    }
                }
                return -1;
            };
            Array.prototype.remove = function (val) {
                var index = this.indexOf(val);
                if (index > -1) {
                    this.splice(index, 1);
                    this.unshift(val);
                }
                if (index == -1) {
                    this.unshift(val);
                }
            };
            list.remove(val);
            if (list.length > 10) {
                list.splice(10, 1);
            }
            var key = "search_message";
            $api.setStorage(key, list);
            api.sendEvent({
                name: 'searchKeyword'
            });
        }
    }

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                showModal: false,
                isActive: 0,
                page: 1,
                is_free_express: 0,
                from_type: 0,
                goodsList: goodsList,
                likeList: likeList,
                isPrice: true,
                isSale: true,
                listOf2col: listOf2col,
                params: {
                    keyword: param.keyword,
                    priceOrder: '',
                    saleCountOrder: '',
                    from_type: "",
                    minPrice: "",
                    maxPrice: "",
                    preMoney: '',
                    is_free_express: ""
                },
                url: URL.searchGoods,
                key: 0,
                BSImg: Vue.BSImg
            },
            computed: {
                selectModal: function () {
                    return {
                        show: this.showModal,
                        hide: !this.showModal
                    }
                }
            },
            watch:{
                params:{
                    handler:function (n) {
                        showProgress();
                        var data = {
                            member_id: getPrefs('member_id'),
                            page:1,
                        };
                        concatJson(data, n);
                        var callback = function (ret) {
                            vm.goodsList = ret.content.searchResult;
                            if (vm.goodsList.length == 0) {
                                vm.likeList = ret.content.recommendGoods;
                            }
                            vm.page = 1;
                            vm.key++;
                            window.scrollTo(0, 0);
                        };
                        pinet.post(this.url, data, callback);
                    },
                    deep:true,
                }
            },
            methods: {
                share: function (good) {
                  if (!getPrefs('token')) {
                      reLogin();
                      return;
                  }else{
                      openMNActionButton(good);
                  }
                },
                cancelModal: function () {
                    this.showModal = false;
                    api.setFrameAttr({
                        name: 'select_frame',
                        hidden: true
                    });
                },
                isExpress: function (index) {
                    if (this.is_free_express == index) {
                        this.is_free_express = 0;
                        this.params.is_free_express = '';
                    } else {
                        this.is_free_express = index;
                        if (index == 1) {
                            this.params.is_free_express = 1;
                        }
                        if (index == 2) {
                            this.params.is_free_express = 0;
                        }

                    }
                },
                searchKey: function () {
                    var key = document.getElementById('keyword').value;
                    showProgress();
                    this.page = 1;
                    var that = this;
                    var params = {
                        page: this.page,
                        keyword: key,
                        from_type: this.params.from_type,
                        minPrice: this.params.minPrice,
                        maxPrice: this.params.minPrice,
                        is_free_express: this.params.is_free_express,
                        priceOrder: this.params.priceOrder,
                        saleCountOrder: this.params.saleCountOrder,
                        member_id: getPrefs('member_id'),
                    };
                    if (this.keyword) {
                        var callback = function (ret) {
                            that.goodsList = ret.content.searchResult;
                            if (that.goodsList.length == 0) {
                                that.likeList = ret.content.recommendGoods;
                            }
                            api.hideProgress();
                        };
                        pinet.post(URL.searchGoods, params, callback);
                    } else {
                        hideProgress();
                    }

                },
                openGoodsDetail: function (goods_id) {
                    openGoodsDetail(goods_id);
                },
                cancel: function () {
                    this.params.keyword = "";
                    this.page = 1;
                    var that = this;
                    var data = {
                        member_id: getPrefs('member_id'),
                        page: 1
                    };
                    var callback = function (ret) {
                        that.goodsList = ret.content.searchResult;
                        if (that.goodsList.length == 0) {
                            that.likeList = ret.content.recommendGoods;
                        }
                    };
                    pinet.post(URL.searchGoods, data, callback);
                },
                changeStatus: function (index) {
                    if (this.showModal) {
                        this.showModal = false;
                        api.setFrameAttr({
                            name: 'select_frame',
                            hidden: true
                        });
                    }
                    showProgress();
                    var that = this;
                    this.isActive = index;
                    switch (index) {
                        case 0:
                            this.params.saleCountOrder = "";
                            this.params.priceOrder = "";
                            break;
                        case 1:
                            this.params.priceOrder = "";
                            if (this.isSale) {
                                this.params.saleCountOrder = 1;
                            } else {
                                this.params.saleCountOrder = 2;
                            }
                            this.isSale = !this.isSale;
                            break;
                        case 2:
                            this.params.saleCountOrder = "";
                            if (this.isPrice) {
                                this.params.priceOrder = 2;
                            } else {
                                this.params.priceOrder = 1;
                            }
                            this.isPrice = !this.isPrice;
                            break;
                    }
                    this.page = 1;
                    var params = {
                        page: this.page,
                        keyword: this.params.keyword,
                        from_type: this.params.from_type,
                        minPrice: this.params.minPrice,
                        maxPrice: this.params.minPrice,
                        is_free_express: this.params.is_free_express,
                        priceOrder: this.params.priceOrder,
                        saleCountOrder: this.params.saleCountOrder,
                        member_id: getPrefs('member_id'),
                    };
                    var callback = function (ret) {
                        vm.key++;
                        that.goodsList = ret.content.searchResult;
                        if (that.goodsList.length == 0) {
                            that.likeList = ret.content.recommendGoods;
                        }
                    };
                    pinet.post(URL.searchGoods, params, callback);
                },
                changeFavor: function (good) {
                    changeFavor(good);
                },
                openSelect_frame: function () {
                    if (this.showModal) {
                        return;
                    }
                    this.showModal = true;
                    this.isActive = 3;
                    api.openFrame({
                        name: 'select_frame',
                        url: 'select_frame.html',
                        rect: {
                            x: 0,
                            y: 102,
                            w: api.winWidth,
                            h: 340
                        },
                        pageParam: {keyword: this.params.keyword},
                        bounces: false,
                    });
                }
            },
        });
    }

    function addListeners() {
        api.addEventListener({
            name: 'select'
        }, function (ret) {
            vm.showModal = false;
            vm.params = ret.value;
        });

        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });
    }


</script>
</body>
</html>
